<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />

    <script th:src="@{/echarts/echarts.min.js}"></script>
    <script th:src="@{/assets/js/app.js}"></script>
    <header th:replace="header::html"></header>

</head>

<body data-type="chart">
    <header th:replace="header::html"></header>
    <div class="am-g tpl-g">

        <!-- 头部 -->
        <div th:insert="public.html :: head"></div>

        <!-- 风格切换 -->
        <div th:insert="public.html :: tpl-skiner"></div>
        <!-- 侧边导航栏 -->
        <div th:insert="public.html :: left"></div>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
<!--            <div id="main" style="width: 600px;height:400px;"></div>-->
<!--                <script type="text/javascript">-->
<!--                    var myChart = echarts.init(document.getElementById('main'));-->

<!--                    $.get('/Expenditure/getTemp').done(function (res) {-->
<!--                        myChart.setOption({-->
<!--                                title: {-->
<!--                                    text: '宿舍消费方向',-->
<!--                                    subtext: '饼状图',-->
<!--                                    left: 'center'-->
<!--                                },-->
<!--                                tooltip: {-->
<!--                                    trigger: 'item'-->
<!--                                },-->
<!--                                legend: {-->
<!--                                    orient: 'vertical',-->
<!--                                    left: 'left',-->
<!--                                },-->
<!--                                series: [-->
<!--                                    {-->
<!--                                        name: '访问来源',-->
<!--                                        type: 'pie',-->
<!--                                        radius: '50%',-->
<!--                                        data: [-->
<!--                                            {value: res.data[0], name: '买奶茶'},-->
<!--                                            {value: res.data[1], name: '旅游'},-->
<!--                                            {value: res.data[2], name: '电费'},-->
<!--                                            {value: res.data[3], name: '充值游戏'},-->
<!--                                            {value: res.data[4], name: '聚餐'},-->
<!--                                            {value: res.data[5], name: '水费'},-->
<!--                                            {value: res.data[6], name: '买衣服'},-->
<!--                                            {value: res.data[7], name: '干饭'}-->
<!--                                        ],-->
<!--                                        emphasis: {-->
<!--                                            itemStyle: {-->
<!--                                                shadowBlur: 10,-->
<!--                                                shadowOffsetX: 0,-->
<!--                                                shadowColor: 'rgba(0, 0, 0, 0.5)'-->
<!--                                            }-->
<!--                                        }-->
<!--                                    }-->
<!--                                ]-->

<!--                            }-->
<!--                        )-->
<!--                    });-->
<!--                    </script>-->


            <div id="main" style="width: 1400px;height:500px;"></div>-->
            <script type="text/javascript">
                var myChart = echarts.init(document.getElementById('main'));

                $.get('/chart/getTemp1').done(function (res) {
                    myChart.setOption({
                        title: {
                            text: '宿舍消费方向'
                        },
                        tooltip: {},
                        legend: {
                            data:['次数']
                        },
                        xAxis: {
                            data: ["买奶茶","旅游","电费","充值游戏","聚餐","水费","买衣服","干饭"]
                        },
                        yAxis: {},
                        series: [{
                            name: '次数',
                            type: 'bar',
                            data: [res.data[0], res.data[1],res.data[2],res.data[3],res.data[4],res.data[5],res.data[6],res.data[7]]
                        }]
                    });
                });
            </script>

            <div id="main1" style="width: 1400px;height:500px;"></div>-->
            <script type="text/javascript">
                var myChart = echarts.init(document.getElementById('main1'));

                $.get('/chart/getTemp').done(function (res) {
                    myChart.setOption({
                        title: {
                            text: '宿舍消费方向'
                        },
                        tooltip: {},
                        legend: {
                            data:['次数']
                        },
                        xAxis: {
                            data: ["买奶茶","旅游","电费","充值游戏","聚餐","水费","买衣服","干饭"]
                        },
                        yAxis: {},
                        series: [{
                            name: '次数',
                            type: 'bar',
                            data: [res.data[0], res.data[1],res.data[2],res.data[3],res.data[4],res.data[5],res.data[6],res.data[7]]
                        }]
                    });
                });
            </script>




            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 图表 <small>Amaze UI</small></div>
                        <p class="page-header-description">图表组件使用的是 <a href="http://echarts.baidu.com">百度图表echarts</a>。</p>
                    </div>
                    <div class="am-u-lg-3 tpl-index-settings-button">
                        <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
                    </div>
                </div>

            </div>

            <div class="row-content am-cf">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">折线</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <div style="height: 400px" class="" id="tpl-echarts-A">

                        </div>
                    </div>
                </div>


                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">雷达</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <div style="height: 400px" id="tpl-echarts-B">

                        </div>
                    </div>
                </div>


                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">折线柱图</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <div style="height: 400px" id="tpl-echarts-C">

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
    <header th:replace="header::html"></header>
    <script th:src="@{/assets/js/app.js}"></script>

</body>

</html>